<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">
        <template v-if="access != 'kinsfolk'"> 晨检统计 </template>
        <template v-else> 宝宝晨检 </template>
      </div>
    </my-header>
    <div class="search-cell flex">
      <div class="search-item">日期</div>
      <div class="search-box">
        <input
          class="search-input"
          @change="queryFn"
          v-model="params.day"
          type="date"
          style="font-size: 1.6rem"
        />
      </div>
    </div>
    <template v-if="access != 'kinsfolk'">
      <div class="search-cell flex">
        <div class="search-item">班级</div>
        <div class="search-box">
          <select
            class="search-select"
            @change="queryFn"
            v-model="params.clazzId"
          >
            <option :value="item.id" v-for="item in clazzList">
              {{ item.gradeName }}-{{ item.name }}
            </option>
          </select>
        </div>
      </div>
      <div class="home_block oh">
        <div class="home_title tl">
          <template> 幼儿晨检 </template>
        </div>
        <div class="fl p_total">
          <div class="p_number">
            <span class="p_number">{{ totalStudent }}</span
            >人
          </div>
          <div class="tc">幼儿总数</div>
        </div>
        <div class="fr p_items">
          <div class="point_blue flex">
            <div>已检人数</div>
            <div>{{ reportStudent }}人</div>
          </div>
          <div class="point_red flex">
            <div>未检人数</div>
            <div>{{ notReportStudent }}人</div>
          </div>
        </div>
      </div>
      <div class="search_list oa">
        <div class="search_res_item flex" v-for="item in list" :key="item.id">
          <div class="avatar" @click="check(item.avatar)">
            <img :src="item.avatar" alt="" class="max" />
          </div>
          <div class="search_info flex" @click="checkDetail(item)">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="status">
              <template v-if="!item.reportTime">
                {{ item.clazzName }} <span style="color: #ff6d3f">未晨检</span>
              </template>
              <template v-else>
                {{ item.clazzName }} {{ item.reportTime }}
              </template>
            </div>
          </div>
        </div>
        <div
          class="loadMore" @click="loadmore" v-if="params.size < params.total">
          点击加载更多
        </div>
        <div class="loadMore" v-else>没有更多数据了</div>
      </div>
    </template>
    <template v-else>
      <div
        class="home_block oh"
        v-for="item in reportList"
        :key="item.studentId"
      >
        <div class="fl p_total p_total_photo">
          <div class="p_photo" @click="checkPic(item.avatar)">
            <img :src="item.avatar" class="p_photo" />
          </div>
          <div>{{ item.studentName }}</div>
        </div>
        <div class="fr p_items p_report tl flex" v-if="item.report">
          <div>身高：{{ item.height }} cm</div>
          <div>体重：{{ item.weight }} kg</div>
          <div>体温：{{ item.temperature }} ℃</div>
          <div>BMI：{{ item.bmi }}</div>
        </div>
        <div class="fr p_items p_report tl flex" v-else>
          <div class="no_data">未晨检</div>
        </div>
      </div>
      <div class="loadMore" @click="loadmore" v-if="params.size < params.total">
        点击加载更多
      </div>
      <div class="loadMore" v-else>没有更多数据了</div>
    </template>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";

export default {
  components: {},
  data() {
    let time = this.$getNowDate("date");
    return {
      access: "",
      params: {
        current: 1,
        size: 10,
        total: 11,
        pages: 0,
        day: time,
        clazzId: "",
      },
      totalStudent: 0,
      reportStudent: 0,
      notReportStudent: 0,
      list: [],
      clazzList: [],
      reportList: [],
    };
  },
  methods: {
    loadmore() {
      this.params.size += 10;
      this.queryFn();
    },
    saveR() {
      this.$saveR(this.selectForm);
    },
    queryFn() {
      this.$http
        .fetchStudentReportStaticsForTeacher(this.params)
        .then((resp) => {
          let data = resp.data;
          this.totalStudent = data.totalStudent;
          this.reportStudent = data.reportStudent;
          this.notReportStudent = data.notReportStudent;
          this.list = data.page.records;
          this.params.current = data.page.current;
          this.params.size = data.page.size;
          this.params.pages = data.page.pages;
          this.params.total = data.page.total;
        });
    },
    check(url) {
      wx.previewImage({
        previewImage: url,
        urls: [url],
      });
    },
    checkDetail(report) {
      if (report.reportTime) {
        this.$router.push({
          path: "/reportDaily",
          query: {
            id: report.reportId,
          },
        });
      }
    },
    fetchClazzList() {
      this.$http.fetchClazzList().then((resp) => {
        let clazzList = resp.data;
        this.clazzList = clazzList;
        if (clazzList.length > 0) {
          this.params.clazzId = clazzList[0].id;
        }
        this.queryFn();
      });
    },
    fetchStudentReportStaticsForKinsfolk() {
      this.$http
        .fetchStudentReportStaticsForKinsfolk(this.params)
        .then((resp) => {
          this.reportList = resp.data;
        });
    },
    checkPic(url) {
      if (!url) {
        return;
      }
      wx.previewImage({
        previewImage: url,
        urls: [url],
      });
    },
    getWxConfig() {
      let url = window.location.href;
      let _this = this;
      _this.$http
        .fetchWxConfig({
          url: url,
        })
        .then((resp) => {
          wx.config({
            // debug: true,
            appId: resp.data.appId,
            timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
            signature: resp.data.sign, // 必填，签名
            jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
          });
        });
    },
  },
  created() {
    this.access = this.$Cookies.get("loginType");
    if (this.access !== "kinsfolk") {
      this.fetchClazzList();
    } else {
      this.fetchStudentReportStaticsForKinsfolk();
    }
    this.getWxConfig();
  },
};
</script>

<style scoped>
.search_list {
  height: calc(100% - 34rem);
  width: calc(100% - 16px);
  margin: 1rem auto 0;
  padding: 0 1rem;
  box-sizing: border-box;
  background-color: #ffffff;
}

.search_res_item {
  height: 10rem;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}

.search_res_item .avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eeeeee;
}

.search_info {
  margin-left: 2.2rem;
  font-size: 1.6rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.search_info .status {
  font-size: 1.4rem;
  color: rgba(77, 77, 77, 1);
  margin-top: 0.5rem;
}

.home_block {
  color: #0d0d0d !important;
  width: calc(100% - 16px);
  background: #ffffff;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  margin: 1rem auto 1.5rem;
  border-radius: 4px;
}

.home_title {
  font-size: 1.6rem;
  border-left: 4px solid #36c12d;
  border-radius: 10px;
  width: 0;
  white-space: nowrap;
  text-indent: 1rem;
  line-height: 1.6rem;
  height: 1.6rem;
  margin-bottom: 1.5rem;
}

.p_total {
  width: 45%;
  height: 10rem;
  box-sizing: border-box;
  border-right: 1px solid #dddddd;
  padding-right: 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.4rem;
  margin-top: 1rem;
}

.p_number {
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
}

.p_number span {
  font-size: 3.6rem;
  color: #36c12d;
}

.p_items {
  margin-top: 1rem;
  width: 55%;
  height: 10rem;
  box-sizing: border-box;
  padding-left: 4.4rem;
  padding: 2.5rem 0 2.5rem 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.point_blue,
.point_red {
  position: relative;
  justify-content: space-between;
  line-height: 1.7rem;
  height: 1.7rem;
  font-size: 1.2rem;
  width: 100%;
}

.point_red {
  color: #ff6d3f;
}

.point_blue::after,
.point_red::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #36c12d;
  color: #36c12d;
}

.point_red::after {
  background: #ff6d3f;
}

.p_total_photo {
  padding-right: 1rem;
  height: 12rem;
  font-size: 1.6rem;
  margin-top: 0;
}

.p_photo {
  margin: 0 auto 1rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  overflow: hidden;
  background: #e8e8e8;
}

.p_report {
  justify-content: space-between;
  align-items: flex-start;
  height: 12rem;
  font-size: 1.6rem;
  margin-top: 0;
  padding: 0 0 0 2.5rem;
}

.no_data {
  margin-top: 4.5rem;
  color: #ff5722;
}
.loadMore {
  padding: 1rem 0;
}
</style>
